<template>
    <div class="container" v-loading="loading">
        <div class="stu-header" transiton="fade">
            <el-form :inline="true" class="demo-form-inline filter_search" :model="searchForm" label-position="right"
                label-width="120px" ref="searchRules">
                <div>
                    <el-form-item class="nine-form-title" prop="subjectName" label="科目">
                        <span class="mtitle-color mtitle-font">{{searchForm.subjectName || '无'}}</span>
                    </el-form-item>
                    <el-form-item class="nine-form-title" prop="testNameA" label="查询批次">
                        <span class="mtitle-color mtitle-font">{{dataList.testNameA || '无'}}</span>
                    </el-form-item>
                    <el-form-item class="nine-form-title" prop="testNameB" label="对比批次">
                        <span class="mtitle-color mtitle-font">{{dataList.testNameB || '无'}}</span>
                    </el-form-item>
                </div>
            </el-form>                 
        </div>
        <div class="con">
            <div class="export_icon" style="margin-top:20px;margin-left: 15px;" @click="getDataList(1)">
                <img :src="require('@/assets/img/excel_icon.png')" alt="">
                <el-button type="text">导出表格</el-button>
            </div>
            <el-table
                :data="dataList['list']" border highlight-current-row 
                @sort-change="sortChange($event, dataList && dataList['list'])" 
                class="table student-down-table tabs" ref="multipleTable" 
                :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)'}">
                <template v-for="(item,index) in columns">
                    <el-table-column :label="item.name" :prop="item.props" :align="item.align" :sortable="item.sortable? item.sortable: false" :sort-orders="item.sortOrders? item.sortOrders: []" 
                        header-align="center" :key="'b'+index" v-if="item.isShow">
                        <template slot-scope="scope">
                            <template v-if="item.name=='学生姓名'">
                                <el-button type="text" class="idAddName" @click="changeStuInfo(scope.row)" >{{scope.row[item.props]}}</el-button>
                            </template>
                            <template v-else-if="item.name=='原始分百分比差值'|| item.name == '原始分位次差值' || item.name=='等级分百分比差值'|| item.name == '等级分位次差值'">
                                <span :class="{'minus-number':String(scope.row[item.props]).replace('%','')<0, 'positive-number': String(scope.row[item.props]).replace('%','')>0}">
                                    {{scope.row[item.props]}}
                                </span>
                            </template>
                            <template v-else><span>{{scope.row[item.props]}}</span></template>
                        </template>                
                        <template v-if="item.list && item.list.length">
                            <template v-for="(itemSon, indexSon) in item.list">
                                <el-table-column :label="itemSon.name" :sortable="itemSon.sortable? itemSon.sortable: false" :sort-orders="itemSon.sortOrders? itemSon.sortOrders: []" :prop="itemSon.props"
                                    :align="itemSon.align" header-align="center" :key="'a'+indexSon" v-if="itemSon.isShow"></el-table-column>                                
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script>
import { baseUrl } from '@/utils/api';
import {sort} from '@/utils/helper';
function downFile(blob, fileName) {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName);
    } else {
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    }
}
export default {
    name: 'stepStuDetails',//学生详情
    data() {
        return {
            sort: sort,
            loading: false,
            searchForm: {},
            columns: [],
            dataList: [
                // {index: 1, className: '2班', studentId: 80476066, studentName: '曹誉仁',djfBfbcz: '-43.02%', djfWccz: -578,ysfBfbcz: '-43.02%', ysfWccz: -578,
                //     searchDjf: 217.5, searchYsf: 117.5, searchWc: 2743, searchBfb: '98.89%', 
                //     comDjf: 490.5, comYsf: 217.5, comWc: 2165, comBfb: '55.87%'    
                // }
            ],
        }
    },
    activated() {
        // isUseCache为false时才重新刷新获取数据
        // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
        if(this.$route.meta.isUseCache == true){
            // this.dataLists = []; // 清空原有数据
            this.getSessionSearch();
        } 
        // 通过这个控制刷新
        this.$route.meta.isUseCache = false;
    },
    mounted(){
        this.getSessionSearch();
    },
    methods: {
        getSessionSearch(){
            if(JSON.stringify(this.$route.params)!='{}'){
                this.searchForm = {...this.searchForm, ...this.$route.params};
            }else{
                let search = JSON.parse(window.sessionStorage.getItem("vuex"))
                if(JSON.stringify(search.stepStuDetails.routeParams)!='{}'){
                    this.searchForm = {...this.searchForm, ...search.stepStuDetails.routeParams}
                }
            }
            this.getColumns();
            this.getDataList();
        },
        /**
         * 表头排序
         */
        sortChange(val, dataList){ 
            this.sort(dataList, val.prop, val.order=='ascending');
        },
        getColumns(){
            this.columns = [
                {name: '序号', props: 'index', align: 'center', isShow: true},
                {name: '班级名称', props: 'className', align: 'center', isShow: true},
                {name: '学号', props: 'studentId', align: 'center', isShow: true},
                {name: '学生姓名', props: 'studentName', align: 'center', isShow: true},
                {name: '等级分百分比差值', props: 'bfbCz', align: 'center', sortable: 'column', sortOrders: ['ascending', 'descending'], isShow: this.searchForm.scoreType==1},
                {name: '原始分百分比差值', props: 'bfbCz', align: 'center', sortable: 'column', sortOrders: ['ascending', 'descending'], isShow: this.searchForm.scoreType==0},
                {name: '等级分位次差值', props: 'wccz', align: 'center', sortable: 'column', sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==1},
                {name: '原始分位次差值', props: 'wccz', align: 'center', sortable: 'column', sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==0},
                {
                    name: '查询批次',isShow: true,
                    list: [
                        {name: '等级分', props: 'searchScore',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==1},
                        {name: '原始分', props: 'searchScore',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==0},
                        {name: '城区位次', props: 'searchWc',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: true},
                        {name: '城区百分比', props: 'searchBfb',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: true},
                    ],
                },
                {   
                    name: '对比批次',isShow: true,
                    list: [
                        {name: '等级分', props: 'comScore',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==1},
                        {name: '原始分', props: 'comScore',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: this.searchForm.scoreType==0},
                        {name: '城区位次', props: 'comWc',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: true},
                        {name: '城区百分比', props: 'comBfb',align: 'right', sortable: 'column',sortOrders: ['ascending', 'descending'],isShow: true},
                    ]
                }
            ]
        },
         /**
         * 学生详情
         */
        changeStuInfo(row){//跳转路径页面
            let params ={
                customerId: row.customerId ||'',
                yearly: this.searchForm.yearly || '',
                classInfo : 1,
                studentId: row.studentId || '',
                grade: this.searchForm.grade || '',
                index: true,
                paperType: row.paperType+"",
                subjectIds:row.subjectIds || '',
                testId:this.searchForm.testIdA || '',
                // isArtExam: row.isArtExam || '',
            }
            // let toRouteName = this.isGradeShow ? 'studentHomePage' : 'studentHomePage1'; 
            let toRouteName = 'studentHomePage1'; 
            let routeData = this.$router.resolve({ 
                name: toRouteName
            });
            // if(this.isGradeShow){
            // }
            window.open(routeData.href +'?@pageFlag=stu', '_blank');
        },
        getDataList(searchExport){
            let downloadType = searchExport ? 1 : 0;
            let exportObj = {};
            if(searchExport){
                exportObj ={responseType: 'blob'};
            }
            let _this = this;
            _this.loading = true;
            let param = new URLSearchParams();
            param.append('yearly', this.searchForm.yearly || '');//学年
            param.append('grade', this.searchForm.grade || '');//年级
            param.append('testIdA', this.searchForm.testIdA);//考试批次AID
            param.append('testIdB', this.searchForm.testIdB || '');//考试批次BID
            param.append('classId', this.searchForm.classId || '');//班级ID 年级数据传0
            param.append('subjectId', this.searchForm.subjectId);//科目ID
            param.append('progressType', this.searchForm.progressType);//进步/退步类型 0：进步 1：退步
            if(this.searchForm.dataRange != 'null'){//如果为null则不传
                param.append('dataRange', this.searchForm.dataRange);//年级数据范围 null：精华整体  0：高考全日制整体 1：民办校整体
            }
            param.append('noIncludelackTest', this.searchForm.noIncludelackTest || '');//不包含缺补考状态 1：缺考 2：精华补考 3：原校参考
            param.append('scoreType', this.searchForm.scoreType);// 分数类型 0原始分 1等级分
            param.append('downloadType', downloadType);//下载类型，1为下载，其他为查询
            this.$axios.post(baseUrl+'/ft/score/analysis/progressAndFailDetail.do', param, exportObj)
                .then(res => {
                    _this.loading = false;
                    if(searchExport){//导出       
                        let headerContent = res.headers['content-disposition'];   
                        if(headerContent){
                            let filenameStr = headerContent.split('=')[1];
                            let blobobj = new Blob([res.data],{type:'application/vnd.ms-excel'});
                            downFile(blobobj, decodeURI(filenameStr));
                        }
                    }else{
                        if(res.data.code !==0){
                            _this.$message.error(res.data.msg);
                            return false;
                        }
                        _this.dataList = res.data.data || {};
                    }                   
                });    
        }
    }
}
</script>
<style lang="scss" scoped>
/* 负数 */
.minus-number{
    color: red;
}
.positive-number{
    color: #70B603;
}  
</style>